<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/plugin-element/plugin-element.html">
<link rel="import" href="../bower_components/plugin-element/plugin-xhr.html">
<link rel="import" href="shop-common-styles.html">
<dom-module id="shop-find">
    <template>
        <style include="shop-common-styles">
            paper-icon-item iron-icon[slot=item-icon]{
                height: 40px;
                width: 40px;
            }
            paper-icon-item iron-icon{
                color: #666;
            }
            paper-item-body div[secondary]{
                font-size: 12px;
            }
            div[role=listbox] a{
                color: #000;
                text-decoration: none;
            }
        </style>
        <plugin-xhr id="xhr_news_count" auto url="[[app.apiHost]]/product.news.week.count?app_id=[[app.appId]]" response="{{news_count}}" on-success="_newsCountSuccess"></plugin-xhr>
        <plugin-xhr id="xhr_coupon_count" auto url="[[app.apiHost]]/coupon.count?app_id=[[app.appId]]" response="{{coupon_count}}" on-success="_couponCountSuccess"></plugin-xhr>
        <plugin-xhr id="xhr_discount_count" auto url="[[app.apiHost]]/discount.count?app_id=[[app.appId]]" response="{{discount_count}}" on-success="_discountCountSuccess"></plugin-xhr>
        <div role="listbox">
            <a href="/find-news" hidden="[[!haveNews]]">
              <paper-icon-item>
                <iron-icon icon="stars" slot="item-icon"></iron-icon>
                <paper-item-body two-line>
                  <div>新品</div>
                  <div secondary>本周[[news_count.result.count]]款新品上架</div>
                </paper-item-body>
                <iron-icon icon="chevron-right"></iron-icon>
              </paper-icon-item>
            </a>
            <a href="/find-coupon" hidden="[[!haveCoupon]]">
              <paper-icon-item>
                <iron-icon icon="card-giftcard" slot="item-icon"></iron-icon>
                <paper-item-body two-line>
                  <div>优惠卷</div>
                  <div secondary>[[coupon_count.result.count]]账优惠卷可领取</div>
                </paper-item-body>
                <iron-icon icon="chevron-right"></iron-icon>
              </paper-icon-item>
            </a>
            <a href="/find-discount" hidden="[[!haveDiscount]]">
                <paper-icon-item>
                <iron-icon icon="shopping-basket" slot="item-icon"></iron-icon>
                <paper-item-body two-line>
                  <div>促销</div>
                  <div secondary>[[discount_count.result.count]]个促销活动进行中</div>
                </paper-item-body>
                <iron-icon icon="chevron-right"></iron-icon>
              </paper-icon-item>
            </a>
        </div>
        <template is="dom-if" if="[[_isAllNot(haveNews,haveCoupon,haveDiscount)]]">
            <div style="display: flex;justify-content: center;align-items: center;padding: 10px; flex-direction: column;">
                <p><svg viewBox="0 0 64 64" style="background:#fff;width:50px;height:50px;"><g><path d="M32 4c15.6 0 28 12.4 28 28s-12.4 28-28 28-28-12.4-28-28 12.4-28 28-28zM32 0c-17.6 0-32 14.4-32 32s14.4 32 32 32 32-14.4 32-32-14.4-32-32-32v0z"></path><path d="M28 24c0 2.209-1.791 4-4 4s-4-1.791-4-4c0-2.209 1.791-4 4-4s4 1.791 4 4z"></path><path d="M44 24c0 2.209-1.791 4-4 4s-4-1.791-4-4c0-2.209 1.791-4 4-4s4 1.791 4 4z"></path><path d="M16 40h32v4h-32v-4z"></path></g></svg></p>
                <p>没有任何有趣的事情</p>
            </div>
        </template>
    </template>

    <script>
        class ShopFind extends PluginElement {

            static get is() {
                return 'shop-find';
            }

            static get properties() {
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    },
                    haveNews:Boolean,
                    haveCoupon:Boolean,
                    haveDiscount:Boolean
                }
            }
            _visibleChanged(visible) {
                if(visible){
                   
                }
            }
            _newsCountSuccess(e){
                this.haveNews = this.news_count.result.count>0;
            }
            _couponCountSuccess(e){
                this.haveCoupon = this.coupon_count.result.count>0;
            }
            _discountCountSuccess(e){
                this.haveDiscount = this.discount_count.result.count>0;
            }
        }

        customElements.define(ShopFind.is, ShopFind);

    </script>

</dom-module>
